import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps, TeacherReportData } from '../../interface'
import { percentToNum } from '@/utils/percentToNum'

interface Props extends SwiperItemProps, Pick<TeacherReportData, 'expert_student_module'> {}

export const ThirdPage = (props?: Props) => {
    const data = props?.expert_student_module

    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })
    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page} ref={ref}>
            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>
                        <span>2024</span>
                    </p>
                    <p>学员的成长离不开指引，作为考评专家的您</p>
                    <p>
                        一共考评了<span>{data?.score_group || 0}</span>个班级
                    </p>
                    <p>
                        这一年，您考评了<span>{data?.score_student_num || 0}</span>名学员
                    </p>
                    {percentToNum(data?.score_percent) >= 80 && (
                        <p>
                            超过全国<span>{data?.score_percent || '0%'}</span>的考评专家
                        </p>
                    )}
                    <div className={styles.splitLine} />
                    <p>感谢您悉心播撒阳光雨露</p>
                    <p>更好助力他们成长成才</p>
                </div>
            </div>
            <div className={styles.arrowImage} />
            {/* <div className={styles.circleImage} /> */}
        </div>
    )
}

export default ThirdPage
